<template>
  <header class="cluster-selection">
    <span>集群节点</span>
    <a-select style="width: 200px" v-model:value="ipaddress" @change="ipChange">
      <a-select-option value="1">fluxmq@192.168.3.77</a-select-option>
      <a-select-option value="2">fluxmq@192.168.1.186</a-select-option>
    </a-select>
  </header>
  <main>
    <section class="card-row top">
      <section class="card node">
        <img
          src=""
          class="info-img"
        />
        <section class="flex-row">
          <div class="left">
            <img src="@/assets/svg/ort/node.fff6e0bc.svg" class="card-img" />
            <span class="desc">2节点</span>
          </div>
          <div class="right">
            <ul class="item-row">
              <li class="sub-item"><p class="value state">运行中</p><p class="label">节点状态</p> </li>
              <li class="sub-item">
                <p class="value">{{ nodeInfos.nodeName }}</p>
                <span class="label">节点名称</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ runTime }} </p><p class="label">运行时长</p>
              </li>
            </ul>
            <ul class="item-row">
              <li class="sub-item">
                <p class="value">{{ nodeInfos.clusterId }}</p>
                <span class="label">节点ID</span>
              </li>
              <li class="sub-item">
                <p class="value">{{ nodeInfos.startJvmTime }}</p>
                <span class="label">启动时间</span>
              </li>
              <li class="sub-item">
                <p class="value">{{ nodeInfos.version }}</p>
                <span class="label">版本</span>
              </li>
            </ul>
          </div>
        </section>
      </section>
      <section class="card run">
        <img src="@/assets/images/ort/run1.6fb18c4c.png" class="info-img" />
        <section class="flex-row">
          <div class="right text-center">
            <ul class="item-row">
              <li class="sub-item">
                <img src="@/assets/svg/ort/run2.f1872920.svg" class="sub-img" />
                <p class="value"> {{ nodeInfos.mqttInfo.connectSize }}</p>
                <span class="label">连接数</span>
              </li>
              <li class="sub-item">
                <img src="@/assets/svg/ort/run3.c5fe567d.svg" class="sub-img" />
                <p class="value"> {{ nodeInfos.mqttInfo.subscribeSize }} </p>
                <span class="label">订阅数</span>
              </li>
              <li class="sub-item">
                <img src="@/assets/svg/ort/run4.0c6d1af0.svg" class="sub-img" />
                <p class="value"> {{ nodeInfos.mqttInfo.topicSize }} </p>
                <span class="label">主题数</span>
              </li>
              <li class="sub-item">
                <img src="@/assets/svg/ort/run5.a4e5f55b.svg" class="sub-img" />
                <p class="value"> {{ nodeInfos.mqttInfo.retainSize }} </p>
                <span class="label">保留消息数</span>
              </li>
            </ul>
          </div>
        </section>
      </section>
    </section>

    <section class="card-row middle">
      <section class="card write">
        <div class="flex-row">
          <div class="left">
            <img src="@/assets/svg/ort/write.d2ebdcdd.svg" class="card-img" />
          </div>
          <div class="right">
            <ul class="item-row">
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.flowInfo.lastWriteThroughput }}/s </p>
                <span class="label"> 总写入量 {{ nodeInfos.flowInfo.realWriteBytes }} </span>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section class="card read">
        <div class="flex-row">
          <div class="left"><img src="@/assets/svg/ort/read.87ec8a8b.svg" class="card-img" /></div>
          <div class="right">
            <ul class="item-row">
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.flowInfo.lastReadThroughput }}/s </p>
                <span class="label"> 总读取量 {{ nodeInfos.flowInfo.readBytesHistory }} </span>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section class="card mqtt">
        <img src="@/assets/images/ort/mqtt1.db7e1111.png" class="info-img" />
        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.mqttInfo.connectEventSize }} </p>
                <span class="label">连接</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.mqttInfo.publishEventSize }} </p>
                <span class="label">发布</span>
              </li>
              <li class="sub-item">
                <p class="value">{{ nodeInfos.mqttInfo.writeRetryEventSize }} </p>
                <span class="label">发布重试</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.mqttInfo.subscribeEventSize }} </p>
                <span class="label">订阅</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.mqttInfo.unSubscribeEventSize }} </p>
                <span class="label">取消订阅</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.mqttInfo.disconnectEventSize }} </p>
                <span class="label">断开连接</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.mqttInfo.closeEventSize }} </p>
                <span class="label">关闭</span>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </section>

    <section class="card-row bottom">
      <section class="card jvmuse">
        <img src="@/assets/images/ort/jvmuse1.23126b43.png" class="info-img" />
        <div class="gauge-echart">
          <Gauge :chartData="{ name: '内存使用率', value: 46.04 }" :option="chartOptions" height="118px" />
        </div>

        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-item">
                <p class="value">{{ nodeInfos.jvmInfo.heap_init }} </p><span class="label">内存大小</span>
              </li>
              <li class="sub-item">
                <p class="value">{{ nodeInfos.jvmInfo.thread_count }}</p>
                <span class="label">线程数</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-item"
                ><p class="value"> {{ nodeInfos.jvmInfo.jdk_version }} </p><span class="label">JVM版本</span>
              </li>
              <li class="sub-item"
                ><p class="value"> {{ nodeInfos.jvmInfo.no_heap_used }} </p><span class="label">非堆内存使用</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.jvmInfo.fileDescriptors }} </p><span class="label">文件描述符</span>
              </li>
              <li class="sub-item">
                <p class="value"> {{ nodeInfos.jvmInfo.heap_used }} </p><span class="label">堆内存使用</span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section class="card use">
        <img src="@/assets/images/ort/use1.8ad0994f.png" class="info-img" />
        <div class="gauge-echart">
          <Gauge :chartData="{ name: 'cpu使用率', value: 0 }" :option="chartOptions" height="118px" />
        </div>
        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-item"
                ><p class="value"> {{ nodeInfos.cpuInfo.cpuNum }} </p><span class="label">CPU数量</span>
              </li>
              <li class="sub-item"
                ><p class="value">{{ nodeInfos.cpuInfo.cSys }}</p
                ><span class="label">内核态CPU</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-item">
                <p class="value">{{ nodeInfos.cpuInfo.idle }}</p>
                <span class="label">空闲率</span>
              </li>
              <li class="sub-item">
                <p class="value">{{ nodeInfos.cpuInfo.user }}</p>
                <span class="label">用户态CPU</span>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section class="card info-card">
        <div class="flex-row">
          <div class="right">
            <ul class="item-row">
              <li class="sub-card">
                <div class="top"> <img src="@/assets/svg/ort/info2.0d51b5b5.svg" class="card-img" /><span class="label">HTTP地址</span></div>
                <p class="value"> {{ nodeInfos.httpUrl }}</p>
              </li>
              <li class="sub-card">
                <div class="top"><img src="@/assets/svg/ort/info3.6bc0bec5.svg" class="card-img" /><span class="label">MQTT地址</span></div>
                <p class="value"> {{ nodeInfos.mqttUrl }} </p>
              </li>
            </ul>
            <ul class="item-row">
              <li class="sub-card">
                <div class="top"> <img src="@/assets/svg/ort/info4.cc30d68b.svg" class="card-img" /><span class="label">WebSocket地址</span></div>
                <p class="value"> {{ nodeInfos.websocketUrl }} </p>
              </li>
              <li class="sub-card">
                <div class="top"><img src="@/assets/svg/ort/info5.6b709e97.svg" class="card-img" /><span class="label">MQTTS地址</span></div>
                <p class="value"> 未开启 </p>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </section>
  </main>
</template>
<script lang="ts" setup>
  import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
  import Gauge from '/@/components/chart/Gauge.vue';
  import nodeInfos from './overview.json';
  const ipaddress = ref<string>('1');
  let timer = null;
  const runTime = computed(() => {
    var startDate = new Date(nodeInfos.startJvmTime);
    var endDate = new Date();
    let timeDiff = Math.abs(endDate - startDate);
    const days = Math.floor(timeDiff / (1000 * 3600 * 24));
    timeDiff -= days * (1000 * 3600 * 24);
    const hours = Math.floor(timeDiff / (1000 * 3600));
    timeDiff -= hours * (1000 * 3600);
    const minutes = Math.round((timeDiff % (1000 * 3600)) / (1000 * 60));
    return days + '天' + hours + '时' + minutes + '分';
  });
  /** 开启定时器 */
  function openTimer() {
    closeTimer();
    timer = setInterval(() => {
      console.log('定时刷新');
    }, 5000);
  }
  /** 关闭定时器 */
  function closeTimer() {
    if (timer) clearInterval(timer);
  }
  onMounted(() => {
    openTimer();
  });
  onUnmounted(() => {
    closeTimer();
  });
  const chartOptions = reactive({
    series: [
      {
        name: '',
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        radius: '170%',
        splitNumber: 4,
        center: ['50%', '90%'],
        axisLine: {
          // show: true,
          lineStyle: {
            width: 7,
            shadowBlur: 0,
            color: [
              [0.25, '#7cffb2'],
              [0.5, '#58d9f9'],
              [0.75, '#fddd60'],
              [1, '#ff6e76'],
            ],
          },
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '50%',
          width: 5,
          offsetCenter: [0, '-20%'],
          itemStyle: {
            color: 'auto',
          },
        },
        splitLine: {
          length: 5,
          lineStyle: {
            width: 2,
            color: '#333333',
          },
        },
        itemStyle: {
          color: 'auto',
        },
        title: {
          show: false,
        },
        detail: {
          fontSize: 13,
          color: 'auto',
          fontWeight: 'bolder',
          offsetCenter: [0, '-20%'],
          formatter: '{value}%',
        },
        data: [{ value: 70, name: '本地磁盘' }],
      },
    ],
  });
</script>
<style lang="less" scoped>
  p {
    margin: 0;
  }
  header,
  main {
    padding: 0 16px;
  }
  .cluster-selection {
    display: flex;
    align-items: center;
    color: #1d6bff;
    margin-top: 10px;
    span {
      margin-right: 15px;
    }
    :deep(:where(.css-dev-only-do-not-override-udyjmm).ant-select:not(.ant-select-customize-input) .ant-select-selector) {
      border-radius: 20px;
      border-color: #1d6bff;
    }
  }
  .card-row {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
  }
  .card-row .card {
    height: 180px;
    width: 0;
    flex: 1;
    position: relative;
    background: #fff;
    box-shadow: 5px 16px 38px 0 rgba(0, 24, 69, 0.11);
    border-radius: 18px;
    border: 1px solid #efefef;
    padding: 10px 14px 20px;
  }
  .card-row .card:not(:last-of-type) {
    margin-right: 16px;
  }
  .card-row .card .run {
    flex: 1;
  }
  .card-row .card .info-img {
    height: 30px;
  }
  .card-row .card .flex-row {
    display: flex;
    padding: 0 16px;
  }
  .card-row .card .flex-row .left {
    flex: 0 0 68px;
    position: relative;
  }
  .card-row .card .flex-row .left .card-img {
    width: 100%;
    height: 100px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .card-row .card .flex-row .left .desc {
    display: inline-block;
    width: 48px;
    border-radius: 9px;
    font-size: 11px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    background: linear-gradient(144deg, #124cff, #4393ff);
    position: absolute;
    left: 50%;
    top: calc(50% + 25px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .card-row .card .flex-row .right {
    padding: 20px 30px 0;
    flex: 1;
  }
  .card-row .card .flex-row .right .item-row {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
  }
  .card-row .card .flex-row .right .sub-item .value {
    font-size: 16px;
    font-weight: 500;
    color: #0b1e42;
    line-height: 22px;
    height: 22px;
  }
  .card-row .card .flex-row .right .sub-item .state {
    color: #1dac73;
  }
  .card-row .card .flex-row .right .sub-item .state:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: linear-gradient(1turn, #0ba360, #3cba92);
    border-radius: 50%;
    margin-right: 4px;
  }
  .card-row .card .flex-row .right .sub-item .label {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #788aa0;
    line-height: 18px;
  }
  .card-row .node {
    flex: 2;
  }
  .card-row .node .flex-row .left {
    flex: 0 0 100px !important;
  }
  .card-row .node .right {
    padding-top: 0;
  }
  .card-row .node .flex-row .right {
    padding: 0px 30px;
  }
  .card-row .node .right .sub-item {
    flex: 0 0 200px;
  }
  .card-row .write,
  .card-row .read,
  .card-row .mqtt {
    height: 148px;
  }
  .card-row .mqtt {
    flex: 2;
  }
  .card-row .jvmuse,
  .card-row .use,
  .card-row .info-card {
    height: 377px;
  }
  .card-row .jvmuse .flex-row .right {
    padding: 0;
  }
  .card-row .read .card-main,
  .card-row .card.write .card-main,
  .card-row .write .flex-row,
  .card-row .read .flex-row {
    padding-top: 20px;
  }

  .card-row .jvmuse .flex-row .sub-item {
    flex: 1;
    text-align: center;
    background: #f5f8fa;
    border-radius: 8px;
    padding: 6px 0;
  }
  .card-row .jvmuse .flex-row .sub-item:last-of-type,
  .card-row .use .flex-row .sub-item:last-of-type {
    margin-left: 4px;
  }
  .card-row .use .flex-row .right {
    padding: 0;
  }
  .card-row .use .flex-row .sub-item {
    flex: 1;
    text-align: center;
    background: #f5f8fa;
    border-radius: 8px;
    padding: 22px 0;
  }
  .card-row .jvmuse .flex-row .right .item-row,
  .card-row .use .flex-row .right .item-row {
    padding: 0;
    margin-bottom: 6px;
  }
  .card-row .info-card .right .sub-card {
    width: 0;
    flex: 1;
    height: 180px;
    padding: 40px 20px;
    position: relative;
    background: #fff;
    box-shadow: 5px 16px 38px 0 rgba(0, 24, 69, 0.11);
    border-radius: 18px;
    border: 1px solid #efefef;
  }
  .card-row .info-card .right .sub-card .top {
    display: flex;
  }
  .card-row .info-card .right .sub-card .top .card-img {
    width: 0;
    flex: 0 0 52px;
    margin-right: 20px;
  }
  .card-row .info-card .right .sub-card .top .label {
    font-size: 13px;
    font-weight: 500;
    color: #788aa0;
    line-height: 18px;
    padding-top: 17px;
  }
  .card-row .info-card .right .sub-card .value {
    margin-top: 22px;
    font-size: 13px;
    font-weight: 500;
    color: #0b1e42;
    line-height: 18px;
    word-break: break-all;
  }
  .card-row .info-card .right .item-row:first-of-type {
    margin-bottom: 16px;
  }
  .card-row .info-card {
    box-shadow: none;
    padding: 0;
  }
  .info-card .flex-row,
  .card-row .info-card .flex-row,
  .card-row .info-card .flex-row .right {
    padding: 0;
  }
  .card-row .info-card .right .item-row:first-of-type {
    margin-bottom: 16px;
  }
  .card-row .info-card .right .sub-card:last-of-type {
    margin-left: 16px;
  }
  .card-row .jvmuse .gauge-echart,
  .card-row .use .gauge-echart {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
</style>
